<template>
  <div>

    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>品牌管理</el-breadcrumb-item>
      <el-breadcrumb-item>品牌列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>

    <el-form 
      @submit.native.prevent
      :inline="true" class="demo-form-inline">
      <el-form-item label="品牌名称">
        <el-input @keyup.native.enter="search" v-model="name" placeholder="品牌名称关键字"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
    </el-form>
    <el-divider content-position="left">品牌列表</el-divider>

  

  </div>
</template>

<script>

  import myaxios from '@/http/MyAxios'
  import httpApi from '@/http'

  export default {
    components: {  },
    data() {
      return {
        name: "",   
        brand: [], 
      }
    },
    methods: {


      /** 根据品牌名称关键字模糊查询列表 */
      listbrandByName(){
        let url = ""
        let params = {name: this.name.trim()}
        myaxios.post(url, params).then(res=>{
          console.log('模糊查询的结果', res)
          this.brand = res.data.data
        })
      },

      /** 搜索品牌列表 */
      search(){
        if(this.name.trim()==''){  // 查询所有
          this.listbrand()
        }else{ // 模糊查询
          this.listbrandByName()
        }
      }, 

      /** 加载品牌列表 */
      listbrand() {
        httpApi.brandorApi.queryAllbrand().then(res=>{
          this.brand = res.data.data
        })
      }
    },
    mounted(){
      this.listbrand()  // 加载品牌列表
    }
  }
</script>

<style lang="scss" scoped>

</style>